<template>
    <BlockBox text="Ant Design Vue Dialog 自定义封装测试">
        <div class="ant-dialog-demo">
            <h2>Ant Design Vue Dialog 封装测试</h2>

            <div class="button-group">
                <button @click="showBasicDialog">基础对话框</button>
                <button @click="showCustomDialog">自定义宽度对话框</button>
                <button @click="showLargeDialog">大尺寸对话框</button>
            </div>

            <!-- 基础对话框 -->
            <es-dialog v-model:open="basicVisible" title="基础对话框" @ok="handleOk" @cancel="handleCancel">
                <p>这是一个基础的对话框示例</p>
                <p>使用了 EsAntDialog 封装组件</p>
                <p>主题样式通过 ConfigProvider 统一管理</p>
            </es-dialog>

            <!-- 自定义样式对话框 -->
            <es-dialog v-model:open="customVisible" title="自定义宽度对话框" width="600px" @ok="handleOk">
                <p>这个对话框宽度为 600px</p>
                <p>支持主题切换功能</p>
                <p>样式完全由 Ant Design Vue 的 ConfigProvider 控制</p>
            </es-dialog>

            <!-- 大尺寸对话框 -->
            <es-dialog v-model:open="largeVisible" title="大尺寸对话框" width="800px" @ok="handleOk">
                <div style="height: 400px; overflow-y: auto;">
                    <p v-for="i in 20" :key="i">内容行 {{ i }}</p>
                </div>
            </es-dialog>
        </div>
    </BlockBox>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { EsDialog } from '../../packages'
import BlockBox from '../BlockBox.vue'

const basicVisible = ref(false)
const customVisible = ref(false)
const largeVisible = ref(false)

const showBasicDialog = () => {
    basicVisible.value = true
}

const showCustomDialog = () => {
    customVisible.value = true
}

const showLargeDialog = () => {
    largeVisible.value = true
}

const handleOk = () => {
    console.log('点击了确定')
}

const handleCancel = () => {
    console.log('点击了取消')
}
</script>

<style scoped lang="scss">
.ant-dialog-demo {
    padding: 20px;

    h2 {
        margin-bottom: 20px;
    }

    .button-group {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;

        button {
            padding: 8px 16px;
            background-color: #3A76E5;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;

            &:hover {
                opacity: 0.8;
            }
        }
    }
}
</style>
